<template>
<div class="ui form ei">
    <div class="ui action field ei-input">
        <label>{{data.label}}</label>
        <input type="text" :placeholder="placeholder" v-model="itemVal">
        <button type="button" class="ui icon teal button" @click="addItem">
        <i class="plus icon"></i>
      </button>
    </div>
    <div class="ui ei-tags">
        <a class="ui label" v-for="item in value" @click="removeItem(item)">
        {{item}}
        <i class="delete icon"></i>
      </a>
        <!-- <div class="ui radio checkbox" :class="data.name">
        <input type="radio" :value="k" :name="data.name">
        <label for="">{{item}}</label>
      </div> -->
    </div>
</div>
</template>

<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

export default {
    data() {
        return {
            enum_val: null,
            value: [], //所有值
            itemVal: "", //表单值
        }
    },
    methods: {
        addItem() {
            if (!/^[\w\u4E00-\u9FA5]+$/.test(this.itemVal)) {
                util.showMsg(this, 'error', '请输入有效的枚举元素名称');
                return;
            }
            if (~this.value.indexOf(this.itemVal)) {
                util.showMsg(this, 'info', this.itemVal + '已存在');
                return;
            }
            this.value.push(this.itemVal);
            this.itemVal = "";
            this.updateVo();
        },
        removeItem(item) {
            this.value.splice(this.value.indexOf(item), 1);
            this.updateVo();
        },
        updateVo() {
            this.$emit('onchange', {
                name: this.data.name,
                value: this.value
            })
        },
        refresh() {
            //console.log(111);
        }
    },
    watch: {
        timestemp: {
            immediate: true,
            handler(val) {
                this.updateVo();
            }
        },
		itemVal(val){
			if(val.split(" ").length!=1){
				setTimeout(()=>{
					this.itemVal = val.replace(/ /g,'+')
				})
			}
		}
    },
    computed: {
        placeholder() {
            return this.data.placeholder || `请选择${this.data.label}`
        },
    },
    props: {
        data: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    components: {},
    created() {
        this.value = this.data.element || [];
    }
}
};
</script>

<style lang="less" scoped>
.ei {
    &-input {
        input {
            width: auto!important;
            min-width: 300px;
        }
    }
}
</style>
